<!DOCTYPE html>
<html>	

<head>
	<title>Documentation | OpenMTurk - A Customizable labelling tool</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="static/css/style.css" />
	<link href="https://fonts.googleapis.com/css?family=Amatica+SC|Assistant|Comfortaa:400,700|Cairo|Gruppo|Hind+Guntur:300|Roboto+Mono" rel="stylesheet"> 
	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>

<body id="body">


  <!-- ------------------------------------------------------ -->
  <!-- --------------------- NAVBAR ------------------------- -->
  <!-- ------------------------------------------------------ -->


    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" id="openmturk_title" href="/">OpenMTurk</a>
        </div>

        <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Labelling tool</a></li>
        <li class="active"><a href="guidelines.html">Guidelines</a></li>
        <li class="active"><a href="documentation.html">Documentation</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="http://www.github.com/HichameMoriceau/OpenMTurk/"><img id="github_logo" src="static/asset_images/github_octocat_32.png" alt="HTML5 Icon" style="width:20px;height:20px;"> Github</a></li>
      </ul>
        </div>
      
      </div>
    </nav>



  <!-- ------------------------------------------------------ -->
  <!-- --------------------- BODY ------------------------- -->
  <!-- ------------------------------------------------------ -->


  <div class="container" id="documentation">
    <div class="container">
      <h1 class="row headers">OpenMTurk <small id="subtitle">Customizable image-labelling tool</small></h1>
      <br>
      <p class="row" id="introductory_text">The OpenTurk labelling tool was born out of the need to label images in an efficient manner while keeping the data private. The image labelling tool is part of a project to digitalize written or typed documents. The goal is that eventually the programme will be able to recognize not just text, but drawings, diagrams, tables, separation structures, mathematical formulas and symbols, in any kind of written or typed text. 
<!-- 
      <p class="row" id="introductory_text">On this demo site it's not possible to upload your own files for labelling, but we've included a couple of dummy images for you to test. Before you start labelling, please first read the below guidelines. In the box beneath the tool, you'll see the output of the label coordinates as you would get them in a json file.</p> -->
    
    </div>

  <div id="documentation">  
    <div class="row text_block">
      <h3 class="headers">Parsing the results in Python</h3>

      <div id="python_code">
        <!-- Insert Python code snippet here -->
        
      </div>
      <div id="visualized_image">
        <!-- Insert image visualized in matplotlib here -->
      </div>
      
    </div>
  </div>

  <!-- ------------------------------------------------------ -->
  <!-- --------------------- FOOTER ------------------------- -->
  <!-- ------------------------------------------------------ -->


  <div class="container-fluid">
    <div id="footer">
        <div class="container">
            <div class="row">

                <br>
                <div class="col-md-12">
                    <center>
                      <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
                      <br>
                      <h4 class="footertext who_built_this">Who built this?</h4>
                      <p class="footertext"><a href="http://www.hichamemoriceau.com">Hichame Moriceau</a>, <a href="https://www.linkedin.com/in/larissa-tijms-a92041120">Larissa Tijms</a>.</p>
                      <br>
                    </center>
                </div>
                
                <!-- 
          <div class="col-md-6">
                    <center>
                      <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
                      <br>
                      <h4 class="footertext who_built_this">Who edited this?</h4>
                      <p class="footertext">Check out  profile on <a href="">LinkedIn</a>. <br>
                    </center>
                </div> -->

            </div>
        </div>
    </div>
  </div> 


</body>


</html>